<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <!--公共样式-->
    <link rel="stylesheet" type="text/css" href="/static/css/common.css">
    <!--页面样式-->
    <!--<link rel="stylesheet" type="text/css" href="css/Lstyle.css">-->
    <link rel="stylesheet" type="text/css" href="/static/css/rem.css">
    <title>驾驶舱</title>
    <!--适配-->
    <script type="text/javascript">
        var html = document.querySelector('html');
        changeRem();
        window.addEventListener('resize', changeRem);

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 19.2 + 'px';
        }
    </script>
</head>

<body>

<!-- 中间区域 -->
<div class="main indexBg" style="min-width:auto;">
    <div class="cockpit_head clearfix">
        <div class="select_box">
            <i class="select_arrow"></i>
            <span class="select_text">森林公安大数据</span>
            <ul class="select_ul">
                <li>森林公安防火预警</li>
                <li class="active">森林公安大数据</li>
            </ul>
        </div>
        <div class="cockpit_title">
            <span class="title_logo"></span>
            <span class="title_name">武汉市森林公安局大数据实战应用平台</span>
        </div>
        <div class="cockpit_header">
            <a class="fl h-index" href="index.html" >主页</a>
            <a class="fl h-user" href="mydata.html"><img src="images/slogo.png"/><span>张娟娟</span></a>
            <div class="login_out fl" onclick="location.href='login.html'"></div>
        </div>
    </div>


    <div class="cockpit_tab">
        <div class="cockpit_contain active clearfix">
            <div class="contain_lt">
                <div class="chart_item chart_lt">
                    <h3 class="title">刑事发案趋势图/Trend Map of Criminal Cases</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart01"></div>
                        <div class="screen_box">
                            <span class="screen_label">年度</span>
                            <div class="screen_select" id="select_1">
                                <i class="select_arrow"></i>
                                <span class="screen_text"></span>
                                <select class="screen_list">
                                    <option>2019</option>
                                    <option>2018</option>
                                    <option>2017</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_rt">
                    <h3 class="title">森林案件统计图/Statistical map of forest cases</h3>
                    <div class="chart_line" id="chart03"></div>
                </div>
                <div class="chart_item chart_lt">
                    <h3 class="title">刑事案人员属性/Personnel attributes</h3>
                    <div class="chart_line" id="chart05"></div>
                </div>
            </div>
            <div class="contain_cent">
                <div class="chart_stat">
                    <div class="chart_line" id="chart07"></div>
                    <div class="chart_bottom">
                        <h3 class="title">案件总数统计</h3>
                        <div class="stat_Box">
                            <div class="screen_box">
                                <div class="screen_select">
                                    <i class="select_arrow"></i>
                                    <span class="screen_text"></span>
                                    <select class="screen_list">
                                        <option>显示</option>
                                        <option>隐藏</option>
                                    </select>
                                </div>
                            </div>
                            <ul class="stat_list">
                                <li><b>市局</b><span>刑事：198</span><span>刑事：198</span></li>
                                <li><b>黄陂</b><span>刑事：98</span><span>刑事：123</span></li>
                                <li><b>江夏</b><span>刑事：78</span><span>刑事：142</span></li>
                                <li><b>蔡甸</b><span>刑事：98</span><span>刑事：123</span></li>
                                <li><b>新洲</b><span>刑事：198</span><span>刑事：234</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_cent">
                    <h3 class="title">单月案件统计/Monthly case statistics</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart08"></div>
                        <div class="chart_area">区域：<span>武汉市</span></div>
                    </div>
                </div>
            </div>
            <div class="contain_rt">
                <div class="chart_item chart_rt">
                    <h3 class="title">行政发案趋势图/Trend Map of Administrative Cases</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart02"></div>
                        <div class="screen_box">
                            <span class="screen_label">年度</span>
                            <div class="screen_select" id="select_2">
                                <i class="select_arrow"></i>
                                <span class="screen_text"></span>
                                <select class="screen_list">
                                    <option>2019</option>
                                    <option>2018</option>
                                    <option>2017</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_lt">
                    <h3 class="title">野生动物案件统计图/Statistics of wildlife cases</h3>
                    <div class="chart_line" id="chart04"></div>
                </div>
                <div class="chart_item chart_rt">
                    <h3 class="title">行政案人员属性/Personnel attributes</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart06"></div>
                        <div class="mask abst01">
                            <h3><span>拘留</span><span>120起</span></h3>
                            <p><span>野生动物</span><span>100起</span></p>
                            <p><span>野生动物</span><span>20起</span></p>
                        </div>
                        <div class="mask abst02">
                            <h3><span>劳动教养</span><span>220起</span></h3>
                            <p><span>野生动物</span><span>100起</span></p>
                            <p><span>野生动物</span><span>120起</span></p>
                        </div>
                        <div class="mask abst03">
                            <h3><span>警告</span><span>300起</span></h3>
                            <p><span>野生动物</span><span>100起</span></p>
                            <p><span>野生动物</span><span>200起</span></p>
                        </div>
                        <div class="mask abst04">
                            <h3><span>罚款</span><span>100起</span></h3>
                            <p><span>野生动物</span><span>64起</span></p>
                            <p><span>野生动物</span><span>36起</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="cockpit_contain clearfix">
            <div class="contain_lt">
                <div class="chart_item chart_lt">
                    <h3 class="title">刑事发案趋势图/Trend Map of Criminal Cases</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart11"></div>
                        <div class="screen_box">
                            <span class="screen_label">年度</span>
                            <div class="screen_select" id="select_11">
                                <i class="select_arrow"></i>
                                <span class="screen_text"></span>
                                <select class="screen_list">
                                    <option>2019</option>
                                    <option>2018</option>
                                    <option>2017</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_rt">
                    <h3 class="title">起火原因统计/Statistics of Fire Causes</h3>
                    <div class="chart_line" id="chart13"></div>
                </div>
                <div class="chart_item chart_lt">
                    <h3 class="title">森林火灾属性/Forest fire attributes</h3>
                    <div class="chart_line" id="chart15"></div>
                </div>
            </div>
            <div class="contain_cent">
                <div class="chart_stat">
                    <div class="chart_line" id="chart17"></div>
                    <div class="chart_bottom">
                        <h3 class="title">火灾总数统计</h3>
                        <div class="stat_Box">
                            <div class="screen_box">
                                <div class="screen_select">
                                    <i class="select_arrow"></i>
                                    <span class="screen_text"></span>
                                    <select class="screen_list">
                                        <option>显示</option>
                                        <option>隐藏</option>
                                    </select>
                                </div>
                            </div>
                            <ul class="stat_list">
                                <li><b>市局</b><span>火灾总数：234</span></li>
                                <li><b>黄陂</b><span>行政总数：123</span></li>
                                <li><b>江夏</b><span>行政总数：78</span></li>
                                <li><b>蔡甸</b><span>行政总数：98</span></li>
                                <li><b>新洲</b><span>行政总数：198</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_cent">
                    <h3 class="title">单月案件统计/Monthly case statistics</h3>
                    <div class="chart_Box">
                        <div class="info_Box">
                            <div class="info_lt">
                                <span class="keyword">关键字</span>
                                <span class="abst loca01">洪山区</span>
                                <span class="abst loca02">蔡甸区</span>
                                <span class="abst loca03">黄陂区</span>
                                <span class="abst loca04">汉阳区</span>
                                <span class="abst loca05">新洲区</span>
                                <span class="abst loca06">武昌区</span>
                                <span class="abst loca07">东西湖区</span>
                                <span class="abst loca08">江夏区</span>
                                <span class="abst loca09">江汉区</span>
                                <span class="abst loca10">江岸区</span>
                                <span class="abst loca11">硚口区</span>
                            </div>
                            <div class="info_rt">
                                <ul class="notice_list">
                                    <!--<li>-->
                                        <!--<div class="scroll_div">-->
                                            <!--<div class="scroll_begin"><b>2019.05.06</b><span>洪山区九峰山森林公园突发火情，人员伤亡未知。</span></div>-->
                                            <!--<div class="scroll_end"></div>-->
                                        <!--</div>-->
                                    <!--</li>-->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="contain_rt">
                <div class="chart_item chart_rt">
                    <h3 class="title">行政发案趋势图/Trend Map of Administrative Cases</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart12"></div>
                        <div class="screen_box">
                            <span class="screen_label">年度</span>
                            <div class="screen_select" id="select_12">
                                <i class="select_arrow"></i>
                                <span class="screen_text"></span>
                                <select class="screen_list">
                                    <option>2019</option>
                                    <option>2018</option>
                                    <option>2017</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="chart_item chart_lt">
                    <h3 class="title">当月区域火灾统计/Monthly regional fire statistics</h3>
                    <div class="chart_line" id="chart14"></div>
                </div>
                <div class="chart_item chart_rt">
                    <h3 class="title">火灾案人员属性/Personnel attributes in fire cases</h3>
                    <div class="chart_Box">
                        <div class="chart_line" id="chart16"></div>
                        <ul class="num_list"></ul>
                        <ul class="line_list"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页面底部 -->
<!--<div class="footer">-->
    <!--<div class="footer_wrap">Copyright © 2002-2011 武汉市森林公安局版权所有   鄂ICP备12074710号-</div>-->
<!--</div>-->

<script type="text/javascript" src="/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/static/js/base.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/echartMap.js"></script>
<script type="text/javascript">

//刑事发案趋势图
var myChart1 = echarts.init(document.getElementById('chart01'));
var Data1=[
    {
        year:2019,
        name:['野生动物','森林'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]

    },
    {
        year:2018,
        name:['野生动物','森林'],
        data1:[20,50,50,70,100,110,135,140,135,160,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]
    },
    {
        year:2017,
        name:['野生动物','森林'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]

    }
];
var option1 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['野生动物','森林'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11', '12'],
        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#026d6d',//左边线的颜色
                width:'1' //坐标线的宽度
            }
        },
        axisLabel: {
            textStyle: {
                color: '#026d6d',//坐标值得具体的颜色
            }
        }
    },
    yAxis: {
        type: 'value',
        splitLine:{
            show:false//去掉网格线
        },
        axisLine: {
            lineStyle: {
                type: 'solid',
                color:'#026d6d',
                width:'1'
            }
        },
        axisLabel: {
            textStyle: {color: '#026d6d'}
        }
    },
    series: [
        {
            name:'野生动物',
            type:'line',
            symbolSize:8,   //拐点圆的大小
            color:['#02fdf7'],  //折线条的颜色
            data:Data1[0].data1,
            itemStyle:{
                normal:{
                    lineStyle:{width:2}
                }
            }
        },
        {
            name:'森林',
            type:'line',
            symbolSize:8,   //拐点圆的大小
            color:['#FFDB00'],  //折线条的颜色
            data:Data1[0].data2,
            itemStyle:{
                normal:{
                    lineStyle:{width:2}
                }
            }
        }
    ]
};
myChart1.setOption(option1);
$("#select_1").on("change",function(){
    var _val=$(this).find("option:selected").text();
    Data1.forEach(function(v){
        if(v.year==_val){
            option1.series[0].data=v.data1;
            option1.series[1].data=v.data2;
            myChart1.setOption(option1);
        }
    })
})



var myChart11 = echarts.init(document.getElementById('chart11'));
var Data11=[
    {
        year:2019,
        name:['火警','火灾'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,30,25,55,140,90,100,170,155,145,130,180]

    },
    {
        year:2018,
        name:['火警','火灾'],
        data1:[20,50,50,70,100,110,135,140,135,160,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]
    },
    {
        year:2017,
        name:['火警','火灾'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]

    }
];
var option11 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['火警','火灾'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['01', '02', '03', '04', '05', '06', '07','08','09','10','11', '12'],
        axisLine: {
            lineStyle: {
                type: 'solid',
                color: '#026d6d',//左边线的颜色
                width:'1' //坐标线的宽度
            }
        },
        axisLabel: {
            textStyle: {
                color: '#026d6d',//坐标值得具体的颜色
            }
        }
    },
    yAxis: {
        type: 'value',
        splitLine:{
            show:false//去掉网格线
        },
        axisLine: {
            lineStyle: {
                type: 'solid',
                color:'#026d6d',
                width:'1'
            }
        },
        axisLabel: {
            textStyle: {color: '#026d6d'}
        }
    },
    series: [
        {
            name:'火警',
            type:'line',
            symbolSize:8,   //拐点圆的大小
            color:['#FB819C'],  //折线条的颜色
            data:Data11[0].data1,
            itemStyle:{
                normal:{
                    lineStyle:{width:2}
                }
            }
        },
        {
            name:'火灾',
            type:'line',
            symbolSize:8,   //拐点圆的大小
            color:['#05A1FE'],  //折线条的颜色
            data:Data11[0].data2,
            itemStyle:{
                normal:{
                    lineStyle:{width:2}
                }
            }
        }
    ]
};
myChart11.setOption(option11);
$("#select_11").on("change",function(){
    var _val=$(this).find("option:selected").text();
    Data11.forEach(function(v){
        if(v.year==_val){
            option11.series[0].data=v.data1;
            option11.series[1].data=v.data2;
            myChart11.setOption(option11);
        }
    })
})


//行政发案趋势图
var myChart2 = echarts.init(document.getElementById('chart02'));
var Data2=[
    {
        year:2019,
        name:['野生动物','森林'],
        data1:[60, 85, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
        data2:[50, 75, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]

    },
    {
        year:2018,
        name:['野生动物','森林'],
        data1:[20,50,50,70,100,110,135,140,135,160,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]
    },
    {
        year:2017,
        name:['野生动物','森林'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]

    }
];
var option2 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['野生动物','森林'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['01','02','03','04','05','06','07','08','09','10','11','12'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'}
            }
        }
    ],
    series: [
        {
            name:'野生动物',
            type:'bar',
            barWidth: '20px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color:['#fb9368'],
                }
            },
            data:Data2[0].data1
        },
        {
            name:'森林',
            type:'line',
            itemStyle : {  /*设置折线颜色*/
                normal : {
                    color:'#4AB0FF'
                }
            },
            data:Data2[0].data2
        }
    ]
};
myChart2.setOption(option2);
$("#select_2").on("change",function(){
    var _val=$(this).find("option:selected").text();
    Data2.forEach(function(v){
        if(v.year==_val){
            option2.series[0].data=v.data1;
            option2.series[1].data=v.data2;
            myChart2.setOption(option2);
        }
    })
})





//出警情况统计
var myChart12 = echarts.init(document.getElementById('chart12'));
var Data12=[
    {
        year:2019,
        name:['出动扑火人员','出动扑火车辆'],
        data1:[60, 85, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45],
        data2:[50, 75, 100, 140, 190, 240, 160, 110, 85, 150, 55, 35]

    },
    {
        year:2018,
        name:['出动扑火人员','出动扑火车辆'],
        data1:[20,50,50,70,100,110,135,140,135,160,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]
    },
    {
        year:2017,
        name:['出动扑火人员','出动扑火车辆'],
        data1:[40,60,50,80,110,120,145,150,145,170,150,170],
        data2:[20,40,30,50,140,90,170,160,145,130,140,180]

    }
];
var option12 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['出动扑火人员','出动扑火车辆'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['01','02','03','04','05','06','07','08','09','10','11','12'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'}
            }
        }
    ],
    series: [
        {
            name:'出动扑火人员',
            type:'line',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color:'#FFA100'
                }
            },
            data:Data12[0].data1
        },
        {
            name:'出动扑火车辆',
            type:'line',
            itemStyle : {  /*设置折线颜色*/
                normal : {
                    color:'#60E0D0'
                }
            },
            data:Data12[0].data2
        }
    ]
};
myChart12.setOption(option12);
$("#select_12").on("change",function(){
    var _val=$(this).find("option:selected").text();
    Data12.forEach(function(v){
        if(v.year==_val){
            option12.series[0].data=v.data1;
            option12.series[1].data=v.data2;
            myChart12.setOption(option12);
        }
    })
})




//森林案件统计图
var myChart3 = echarts.init(document.getElementById('chart03'));
var option3 = {
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c}"
    },
    legend: {
        data:['刑事案件','行政案件'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:30,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['盗伐林木','滥伐林木','森林失火','其他','滥伐森林','毁坏森林','改变或占用林地','违法运输木材','其他'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                    fontSize: 12
                },
                interval:0,//横轴信息全部显示
                //rotate:-30,//-30度角倾斜显示
                formatter:function(params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 4;  //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'},
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name:'刑事案件',
            type:'bar',
            barWidth: '16px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color:['#00C4F1'],
                }
            },
            data:[140, 90, 110, 70]
        },
        {
            name:'行政案件',
            type:'bar',
            barWidth: '16px',
            itemStyle : {  /*设置折线颜色*/
                normal : {
                    color:'#FF9F8F'
                }
            },
            data:['','','','',160, 120, 85, 90, 130]
        }
    ]
};
myChart3.setOption(option3);


//起火原因统计
var myChart13 = echarts.init(document.getElementById('chart13'));
var option13 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:[],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['农事用火','施工作业','野外吸烟','纵火','雷击火','其他'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'}
            }
        }
    ],
    series: [
        {
            name:'',
            type:'bar',
            barWidth: '20px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#E9E9E9'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#00A0FF'}
                        ]
                    )
                }
            },
            data:[60, 85, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]
        }
    ]
};
myChart13.setOption(option13);


var myChart14 = echarts.init(document.getElementById('chart14'));
var option14 = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:[],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:25,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['市局','蔡甸','黄陂','其他','江夏','新洲'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'}
            }
        }
    ],
    series: [
        {
            name:'',
            type:'bar',
            barWidth: '20px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#D0FFFA'},
                            {offset: 0.5, color: '#9ef1e6'},
                            {offset: 1, color: '#62E1CE'}
                        ]
                    )
                }
            },
            data:[60, 85, 100, 150, 200, 250, 150, 100, 95, 160, 50, 45]
        }
    ]
};
myChart14.setOption(option14);

//野生动物案件统计图/
var myChart4 = echarts.init(document.getElementById('chart04'));
var option4 = {
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c}"
    },
    legend: {
        data:['刑事案件','行政案件'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:30,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['猎捕濒危动物','出售濒危动物','非法狩猎','其他','违法猎捕','违法贩卖','违法驯养','其他'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                    fontSize: 12
                },
                interval:0,//横轴信息全部显示
                //rotate:-30 //-30度角倾斜显示
                formatter:function(params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 4;  //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'},
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name:'刑事案件',
            type:'bar',
            barWidth: '16px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color:'#FFA100',
                }
            },
            data:[140, 90, 110, 70]
        },
        {
            name:'行政案件',
            type:'bar',
            barWidth: '16px',
            itemStyle : {  /*设置折线颜色*/
                normal : {
                    color:'#5DDFF8'
                }
            },
            data:['','','','',160, 120, 85, 90]
        }
    ]
};
myChart4.setOption(option4);

//野生动物案件统计图/
var myChart5 = echarts.init(document.getElementById('chart05'));
var option5 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'top',
        data:['拘留','逮捕','移送起诉','取保候审','在逃'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    series : [
        {
            name:'野生动物',
            color:['#03FEF8', '#7ED321', '#F8E71C', '#FF7D00', '#FF4093'],
            type:'pie',
            radius: ['30%', '50%'],
            center : ['25%', '50%'],
            label: {
                normal: {
                    formatter: '{c}件'
                }
            },
            data:[
                {value:17, name:'拘留'},
                {value:8, name:'逮捕'},
                {value:12, name:'移送起诉'},
                {value:10, name:'取保候审'},
                {value:6, name:'在逃'}
            ]
        },
        {
            name:'森林',
            color:['#03FEF8', '#7ED321', '#F8E71C', '#FF7D00', '#FF4093'],
            type:'pie',
            radius: ['30%', '50%'],
            center : ['75%', '50%'],
            label: {
                normal: {
                    formatter: '{c}件'
                }
            },
            data:[
                {value:17, name:'拘留'},
                {value:14, name:'逮捕'},
                {value:9, name:'移送起诉'},
                {value:10, name:'取保候审'},
                {value:18, name:'在逃'}
            ]
        }
    ]
};
myChart5.setOption(option5);


//野生动物案件统计图/
var myChart15 = echarts.init(document.getElementById('chart15'));
var option15 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'top',
        data:['一般火灾','较大火灾','重大火灾','特大火灾'],
        itemWidth:6,
        itemHeight:6,
        icon: "circle",
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    series : [
        {
            name:'',
            color:['#60E0D0', '#FB8C8A', '#FAC06A', '#00C5FF'],
            type:'pie',
            radius: ['40%', '70%'],
            center : ['50%', '50%'],
            label: {
                normal: {
                    formatter: '{c}起'
                }
            },
            data:[
                {value:300, name:'一般火灾'},
                {value:100, name:'较大火灾'},
                {value:120, name:'重大火灾'},
                {value:200, name:'特大火灾'}
            ]
        }
    ]
};
myChart15.setOption(option15);


//森林火灾属性
var myChart6 = echarts.init(document.getElementById('chart06'));
var option6 = {
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        x : 'center',
        y : 'top',
        icon: "circle",
        data:['警告','罚款','拘留','劳动教养'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    series : [
        {
            name:'野生动物',
            hoverAnimation:false,
            color:['#03FEF8', '#7cd22a', '#F8E71C', '#FF7D00'],
            type:'pie',
            radius: ['40%', '70%'],
            center : ['50%', '55%'],
            label: {
                normal: {
                    formatter: ''
                }
            },
            data:[
                {   value:300,
                    name:'警告',
                    itemStyle: {
                        normal: {//颜色渐变
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#004d55'},
                                    {offset: 0.5, color: '#02b6ba'},
                                    {offset: 1, color: '#02fdf7'}
                                ]
                            )
                        }
                    }
                },
                {   value:100,
                    name:'罚款',
                    itemStyle: {
                        normal: {//颜色渐变
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#244b18'},
                                    {offset: 0.5, color: '#467f1e'},
                                    {offset: 1, color: '#79ce29'}
                                ]
                            )
                        }
                    }
                },
                {   value:120,
                    name:'拘留',
                    itemStyle: {
                        normal: {//颜色渐变
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#495116'},
                                    {offset: 0.5, color: '#89871c'},
                                    {offset: 1, color: '#f4e328'}
                                ]
                            )
                        }
                    }
                },
                {   value:200,
                    name:'劳动教养',
                    itemStyle: {
                        normal: {//颜色渐变
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#54350d'},
                                    {offset: 0.5, color: '#c3630a'},
                                    {offset: 1, color: '#ff7c0a'}
                                ]
                            )
                        }
                    }
                }
            ]
        }
    ]
};
myChart6.setOption(option6);


var myChart16 = echarts.init(document.getElementById('chart16'));
var option16 = {
    legend: {
        x : 'center',
        y : 'top',
        data:['刑事处罚','行政处罚','行政处分','纪律处分'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    series : [
        {
            name:'刑事处罚',
            color:['#00C5FF','#064f61'],
            type:'pie',
            hoverAnimation:false,
            radius: ['40%', '50%'],
            center : ['12.5%', '50%'],
            label: {
                normal: {
                    show: false,
                    formatter: '{c}'
                }
            },
            data:[
                {value:234, name:'刑事处罚'},
            ]
        },
        {
            name:'行政处罚',
            color:['#FAC06A','#60552f'],
            type:'pie',
            hoverAnimation:false,
            radius: ['40%', '50%'],
            center : ['37.5%', '50%'],
            label: {
                normal: {
                    show: false,
                    formatter: '{c}'
                }
            },
            data:[
                {value:405, name:'行政处罚'},
            ]
        },
        {
            name:'行政处分',
            color:['#FB8C8A','#5a403f'],
            type:'pie',
            hoverAnimation:false,
            radius: ['40%', '50%'],
            center : ['62.5%', '50%'],
            label: {
                normal: {
                    show: false,
                    formatter: '{c}'
                }
            },
            data:[
                {value:198, name:'行政处分'},
            ]
        },
        {
            name:'纪律处分',
            color:['#60E0D0','#15524c'],
            type:'pie',
            hoverAnimation:false,
            radius: ['40%', '50%'],
            center : ['87.5%', '50%'],
            label: {
                normal: {
                    show: false,
                    formatter: '{c}'
                }
            },
            data:[
                {value:78, name:'纪律处分'},
            ]
        }
    ]
};
var sum=0;
var model='';
var _model='';
option16.series.forEach(function(v){
    sum+=v.data[0].value;
    model+='<li style="color:'+v.color[0]+'">'+v.data[0].value+'</li>';
    _model+='<li>'+v.data[0].name+'</li>';
})
option16.series.forEach(function(v){
    v.data.push({
        value:sum-v.data[0].value,
        name:'其他'
    })
})
myChart16.setOption(option16);
$(".num_list").append(model);
$(".line_list").append(_model);




//单月案件统计/
var myChart8 = echarts.init(document.getElementById('chart08'));
var Data8=[
    {
        name:'武汉市',
        data1:[90,160, 160, 160, 150],
        data2:[140,170, 150, 160, 150]
    },
    {
        name:'江夏区',
        data1:[60, 85, 100, 150, 200, 250, 150],
    },
    {
        name:'黄陂区',
        data1:[ 250, 150, 100, 95, 160, 50, 45],
    },
    {
        name:'蔡甸区',
        data1:[ 150, 200, 250, 95, 160, 50, 45],
    },
    {
        name:'新洲区',
        data1:[60, 85, 100, 150, 200, 250, 150],
    },
];
var data08;
var option8 = {
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c}"
    },
    legend: {
        x:'right',
        y:'top',
        data:['刑事案件','行政案件'],
        itemWidth:6,
        itemHeight:6,
        textStyle:{
            fontSize:12,
            color:'#00EFBE'
        }
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:30,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['市局','黄陂','江夏','蔡甸','新洲'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                    fontSize: 12
                },
                interval:0,//横轴信息全部显示
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'},
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name:'刑事案件',
            type:'bar',
            barWidth: '20px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color:'#FFDB00',
                }
            },
            barGap:0,
            data:Data8[0].data1
        },
        {
            name:'行政案件',
            type:'bar',
            barWidth: '20px',
            itemStyle : {  /*设置折线颜色*/
                normal : {
                    color:'#03FEF8'
                }
            },
            barGap:0,
            data:Data8[0].data2
        }
    ]
};

var option08 = {
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c}"
    },
    grid:{
        x:30,
        y:30,
        x2:10,
        y2:50,
        borderWidth:1
    },
    xAxis: [
        {
            type: 'category',
            data: ['非法狩猎（刑事）','违法出售野生动物（行政）','滥伐林木（刑事）','滥伐林木（行政）','占用林地（行政）','毁坏森林（行政）','违法运输木材（行政）'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#026d6d',//左边线的颜色
                    width:'1' //坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#026d6d',//坐标值得具体的颜色
                    fontSize: 12
                },
                interval:0,//横轴信息全部显示
                //rotate:-30 //-30度角倾斜显示
                formatter:function(params) {
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 6;  //一行显示几个字
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            splitLine:{
                show:false//去掉网格线
            },
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color:'#026d6d',
                    width:'1'
                }
            },
            axisLabel: {
                textStyle: {color: '#026d6d'},
                fontSize: 12
            }
        }
    ],
    series: [
        {
            name:'',
            type:'bar',
            barWidth: '20px',
            /*设置柱状图颜色*/
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#B4EC51'},
                            {offset: 0.5, color: '#6db538'},
                            {offset: 1, color: '#429321'}
                        ]
                    )
                }
            },
            data:data08
        }
    ]
};
myChart8.setOption(option8);


</script>

</body>
</html>
